import React, { Component } from "react";
import PageHeader from "../components/PageHeader";
import "../assets/css/PersonalData.css";
import login from "../hooks/loginInfo";
import Bg from "../components/Bg";
import { Redirect } from "react-router-dom";
import Loading from "../components/Loading";

class PersonalData extends Component {
  constructor(props) {
    super(props);

    this.state = {
      token: "",
      userInfo: null,
      isLogin: null,
    };
  }

  componentWillMount() {
    var loginInfo = login();
    this.setState({
      isLogin: loginInfo.isLogin,
    });
    if (loginInfo.isLogin) {
      this.$axios
        .get("/findAccountInfo", {
          params: {
            tokenString: loginInfo.token,
          },
        })
        .then((res) => {
          this.setState({
            token: loginInfo.token,
            userInfo: res.data.result[0],
          });
        });
    }
  }

  render() {
    return this.state.isLogin ? (
      this.state.userInfo ? (
        <div className="PersonalData">
          <PageHeader>
            <span slot="title">个人资料</span>
          </PageHeader>
          <Bg>
            <li>
              <span>头像</span>
              <img src={this.state.userInfo.userImg} alt="" />
            </li>
            <li>
              <span>用户id</span>
              <span>{this.state.userInfo.userId}</span>
            </li>
            <li>
              <span>手机号</span>
              <span>{this.state.userInfo.phone}</span>
            </li>
            <li>
              <span>昵称</span>
              <span>{this.state.userInfo.nickName}</span>
            </li>
            <li>
              <span>简介</span>
              <span>
                {this.state.userInfo.desc
                  ? this.state.userInfo.desc
                  : "这家伙很懒，什么都没有留下"}
              </span>
            </li>
          </Bg>
        </div>
      ) : (
        <Loading></Loading>
      )
    ) : (
      <Redirect to="/login"></Redirect>
    );
  }
}

export default PersonalData;
